<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--<link rel="stylesheet" type="text/css"  media="screen" href="style/previous/citportal.css" />-->
<link rel="stylesheet" type="text/css"  media="screen, projection" href="style/previous/tutorial1.css" />
<script type="text/javascript">
    function checkAnswer(num)
    {
        var element = document.getElementById('answer');


        if(num==256)
        {
            element.style.border = "1px solid #000";
            element.innerHTML = "You are correct! There are two choices per option: <span style='color: red;'>Selected</span> and ";
            element.innerHTML += "<span style='color: red'>Unselected</span>. <br /><br />Since there are 8 options, with 2 choices each, we have 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2,2<sup>8</sup>, or 256  configurations.";
        }
        else
        {
            element.innerHTML = num + " is not the right answer. <br /><br />To find the answer,count the number of choices for each option and multiply the number of choices from all options together."
        }

    }

    function checkOA(num)
    {
        var element = document.getElementById('answer');

        if(num==4)
        {
            element.innerHTML = "Correct, N = 16, s = 2 for k = 6 columns and s = 4 for k = 3 columns with strength 2.";
        }
        else if(num==1)
        {
            element.innerHTML = "Incorrect, remember that N represents the number of rows";
        }
        else if(num==2)
        {
            element.innerHTML = "Incorrect, how many columns contain just 2 values?";
        }
        else if(num==3)
        {
            element.innerHTML = "Incorrect, look at the values of k and the total number of columns in the Mixed Orthogonal Array";
        }
        else if(num==5)
        {
            element.innerHTML = "Incorrect, remember the index is found by &#955=N/s<sup>t</sup>, what value do you get if t is equal to 3 and s is equal to 4? ";
        }

    }


    function next_step()
    {
        var i = 1;
        var frame = document.getElementById(i);
        document.getElementById('back_float').style.visibility="visible";
        while(frame)
        {
            if(frame.style.display == 'block')
            {
                make_visible = document.getElementById(i + 1);
                if(make_visible)
                {
                    frame.style.display = 'none';
                    make_visible.style.display = 'block';
                }
                i = i + 2;
                frame = document.getElementById(i);
                if(!frame)
                    document.getElementById('forward_float').style.visibility="hidden";
                break;
            }
            i = i + 1; 
            frame = document.getElementById(i);
        }
    }

    function page()
    {
        var i = 1;
        var check = <?php echo $start?>;
        if(check == i){
            var frame = document.getElementById(i);
            make_visible = document.getElementById(check);
            frame.style.display = 'none';
            make_visible.style.display = 'block';
        } 
        else{
            var frame = document.getElementById(i);
            make_visible = document.getElementById(check);
            frame.style.display = 'none';
            make_visible.style.display = 'block';
            document.getElementById('back_float').style.visibility="visible";
        }
    }

    function back_step()
    {
        var i = 1;
        var frame = document.getElementById(i);
        while(frame)
        {
            if(frame.style.display=='block')
            {
                make_visible = document.getElementById(i-1);
                if(make_visible)
                {
                    frame.style.display = 'none';
                    make_visible.style.display = 'block';
                    document.getElementById('forward_float').style.visibility="visible";
                }
                if(i==2) document.getElementById('back_float').style.visibility="hidden";
                break;
            }
            i = i + 1; 
            frame = document.getElementById(i);
        }

    }
</script>
<body onLoad="page( <?php echo $start?>)"> 
        <div id="header"><h3>Constraint Tutorial</h3></div>
        <hr> 
        <div id="box">
        <div class="row">
            <a href="#" class="seven columns" id="back_float"onclick="back_step()" style='text-align: left; visibility:hidden; background-color: rgb(176, 209, 240)'>
                <h4><i class="icon-left-bold"></i>Previous</h4>
            </a>

            <a href="#" class="seven columns" id="forward_float" onclick="next_step()" style="text-align: right; visibility: visible; background-color: rgb(176, 209, 240)">
                <h4>Next <i class="icon-right-bold"></i></h4>
            </a>
        </div>
            <!--- box border --> 
            <div id="blc"><div id="brc"> 
                    <div id="tlc"><div id="trc"> 
                            <!--  -->	
                            <div class="rbcontent"> 


                                <!--Frame 1-->
                                <div id="1" style="display:block;" >
                                    <div id="contentBox_wide_xl"><p>Objectives. </p></div>
                                    <div id="contentBox"><p>Constraints are essential when
                                            creating high level Combinatorial Interaction Tests. <br /><br /> This Tutorial will give a
                                            quick introduction to constraints and the role they play in Combinatorics.</p></div>
                                    <div id="contentBox"><p> Goals:<br /> <br />1. Understand
                                            what constraints are <br /><br /> 2. Learn how constraints can
                                            shape how a Covering Array is formed</p></div>
                                </div>

                                <!--Frame 2-->
                                <div id="2" style="display:none;" >
                                    <div id="contentBox_wide"><p>Constraints are basically
                                            what they sound like.  <br /> <br />  Any limitation impossed on
                                            a program can be considered a constraint.  For instance a
                                            constraint might be that two paramters are not allowed to be set to the same value.</p></div>
                                    <div id="contentBox"><p>If you design a Covering Array
                                            without taking into account any constraints that exist you could
                                            end up with poor test cases that might fail without testing all combinations.</p></div>
                                    <div id="contentBox"><p>Let's look at an example that
                                            will demonstrate this.</p></div>  
                                </div>

                                <!-- Frame 3 -->
                                <div id="3" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>WebSite configurations </p></div><br />
                                    <table style ='width:50%;  margin-left:20%'><tbody><tr>
                                                <td><div id="contentBox_OA"><p>Here is a simply list of possible
                                                            configurations for a website. <br /><br /> To ensure that a website
                                                            works accross a large number of systems it can be tested using a Covering
                                                            Array that will check all pairwise combinations.</p></div></td>
                                                <td><?php echo webConstraint1(); ?></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 4 -->
                                <div id="4" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A CA(2,2<sup>3</sup>,3<sup>1</sup>) </p></div><br />
                                    <table style ='width:60%;  margin-left:15%'><tbody><tr>
                                                <td><div id="contentBox_OA"><p>Here is a Covering
                                                            Array that covers all pairwise combinations. <br /><br /> However there
                                                            is a massive problem with using this Covering Array to design tests
                                                            for a website.</p></div></td>
                                                <td><?php echo CA1(); ?></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 5 -->
                                <div id="5" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A CA(2,2<sup>3</sup>,3<sup>1</sup>) </p></div><br />
                                    <table style ='width:60%;  margin-left:15%'><tbody><tr>
                                                <td><div id="contentBox_OA"><p>The fourth test contains the
                                                            combination <span style="color: red;">MAC OS X</span> and <span style="color: red;">Internet Explorer 9</span>, however Internet
                                                            Explorer works exclusively with windows. <br /><br /> Because of
                                                            this test four is guaranteed to fail.</p></div></td>
                                                <td><?php echo CA2(); ?></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 6 -->
                                <div id="6" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A CA(2,2<sup>3</sup>,3<sup>1</sup>) </p></div><br />
                                    <table style ='width:60%;  margin-left:15%'><tbody><tr>
                                                <td><div id="contentBox_OA"><p>Lets check and see if any pairwise
                                                            tests are now no longer covered with this set of test cases. <br
                                                                /><br /> Focus on the pairwise combination in row 4 excluding <span style="color: red;">OS X</span>
                                                            and <span style="color: red;">IE9</span>.</p></div></td>
                                                <td><?php echo CA2(); ?></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 7 -->
                                <div id="7" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A CA(2,2<sup>3</sup>,3<sup>1</sup>) </p></div><br />
                                    <table style ='width:60%;  margin-left:15%'><tbody><tr>
                                                <td><div id="contentBox_OA"><p><span style="color: red;">OS X</span> and <span style="color: red;">no flash</span> occur in row 5
                                                            so that combination is ok. <br
                                                                /><br /> <span style="color: red;">OS X</span> and <span style="color: red;">dsl</span> can be found in row 6 so that combination is
                                                            ok as well.</p></div></td>
                                                <td><?php echo CA3(); ?></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 8 -->
                                <div id="8" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A CA(2,2<sup>3</sup>,3<sup>1</sup>) </p></div><br />
                                    <table style ='width:60%;  margin-left:15%'><tbody><tr>
                                                <td><div id="contentBox_OA"><p>Unfortunatly the tests for <span style="color: red;">IE9</span> and
                                                            <span style="color: red;">no flash</span>, <span style="color: red;">IE9</span> and <span style="color: red;">dsl</span>,
                                                            and <span style="color: red;">no flash</span> and <span style="color: red;">dsl</span> only exist in test 4. <br
                                                                /><br /> This covering array is clearly inadequate for testing all
                                                            pairwise combinations.</p></div></td>
                                                <td><?php echo CA4(); ?></td>
                                            </tr></tbody></table>
                                </div>

                                <!-- Frame 9 -->
                                <div id="9" style="display: none;">
                                    <div id="contentBox_wide_xl"><p>A CA(2,2<sup>3</sup>,3<sup>1</sup>) </p></div><br />
                                    <table style ='width:60%;  margin-left:15%'><tbody><tr>
                                                <td><div id="contentBox_OA"><p>One solution at this point is to
                                                            remove the bad test and add a new test case that will cover the missing combinations. <br
                                                                /><br /> This can be easily accomplished with the test <span style="color: red;">Win 7</span>, 
                                                            <span style="color: red;">IE9</span>, <span style="color: red;">no flash</span>, <span style="color: red;">dsl</span>.</p></div></td>
                                                <td><?php echo CA5(); ?></td>
                                            </tr></tbody></table>
                                </div>

                                <!--Frame 10-->
                                <div id="10" style="display:none;" >
                                    <div id="contentBox_wide"><p>Constraints can have a big impact on a Covering Array.  Out of 29 pairwise
                                            tests 3 would have been skipped.
                                            <br /> <br />  In this small example it was an easy fix however
                                            in a large system with a lot of different constraints the
                                            Covering Array can shift dramatically.</p></div>
                                    <div id="contentBox"><p>It is in these complicated systems that
                                            Combinatorics can really shine.</p></div>
                                    <div id="contentBox"><p> Next:<br /> <br /><li><a
                                                href="public/tutorials/coveringArrayTutorial.php?start=6">Back to Covering Array Tutorial</a> </li> <br /><br /></p></div> 
                                </div>
                                <div style="clear: both;"></div>
                            </div>
                        </div></div></div></div>
        </div>
    </div>
</body>


<?php

function webConstraint1() {

    $html = "<div id='form_tutorial_three'>
           <br /><span id='title_form_tutorial_three'>Operating System";


    $html = $html . "</span><br /><br />
              <span><select name='frame4content'>
                  <option>Windows 7</option>
                  <option>Mac OS X</option>
             </select>";

    $html = $html . "</span><br /><br />
                <span id='title_form_tutorial_three'>Web Browser";

    $html = $html . "</span><br /><br />
              <span><select name='cookies'>
                  <option>Internet Explorer 9</option>
                 <option>Mozilla Firefox 4</option>
                  <option>Google Chrome</option>
              </select>";

    $html = $html . "</span><br /><br />
                <span id='title_form_tutorial_three'>Additional Factors";

    $html = $html . "</span><br />
                <br />
              <span><input type='checkbox' name='security1' value='ON'/>Flash not installed";

    $html = $html . "</span>
              <br /><span><input type='checkbox' name='security2'value='ON' />Dial up speed (max 56 kbit/s)";

    $html = $html . "</span>
                <br /><br /><span id='buttons_tutorial_three'><input type='hidden' value='Cancel' name='frame4_cancel' /><input type='hidden' value='Submit' name='frame4_submit' /></span>
         </div>";

    return $html;
}

function CA1() {
    $html = "<div id='table_tutorial_two' style='width: 100%; margin-left: 20%;'>
       <table id='options' style='width: 150%; font-size: 11pt; border: 2px solid #2293FF;'>
               <tbody>
                   <tr>
		     <td>Win 7</td>
		     <td>IE9</td>
		     <td>flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td>Win 7</td>
		     <td>Firefox</td>
		     <td>flash</td>
		     <td>dsl</td>
		   </tr>
		   <tr>
		     <td>Win 7</td>
		     <td>Chrome</td>
		     <td>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td>OS X</td>
		     <td>IE9</td>
		     <td>no flash</td>
		     <td>dsl</td>
		   </tr>
		   <tr>
		     <td>OS X</td>
		     <td>Firefox</td>
		     <td>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td>OS X</td>
		     <td>Chrome</td>
		     <td>flash</td>
		     <td>dsl</td>
		   </tr>
              </tbody>
           </table>
   </div>";
    return $html;
}

function CA2() {
    $html = "<div id='table_tutorial_two' style='width: 100%; margin-left: 20%;'>
       <table id='options' style='width: 140%; font-size: 11pt; border: 2px solid #2293FF;'>
               <tbody>
                   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>IE9</td>
		     <td>flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>Firefox</td>
		     <td>flash</td>
		     <td>dsl</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>Chrome</td>
		     <td>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'><img src='public/tutorials/images/green_right_cb.bmp'/></td>
		     <td>OS X</td>
		     <td>IE9</td>
		     <td>no flash</td>
		     <td>dsl</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>OS X</td>
		     <td>Firefox</td>
		     <td>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>OS X</td>
		     <td>Chrome</td>
		     <td>flash</td>
		     <td>dsl</td>
		   </tr>
              </tbody>
           </table>
   </div>";
    return $html;
}

function CA3() {
    $html = "<div id='table_tutorial_two' style='width: 100%; margin-left: 20%;'>
       <table id='options' style='width: 140%; font-size: 11pt; border: 2px solid #2293FF;'>
               <tbody>
                   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>IE9</td>
		     <td>flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>Firefox</td>
		     <td>flash</td>
		     <td>dsl</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>Chrome</td>
		     <td>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td style='background-color:yellow;'>OS X</td>
		     <td style='background-color:yellow;'>IE9</td>
		     <td style='background-color:yellow;'>no flash</td>
		     <td style='background-color:yellow;'>dsl</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'><img src='public/tutorials/images/green_right_cb.bmp'/></td>
		     <td style='background-color:lightgreen;'>OS X</td>
		     <td>Firefox</td>
		     <td style='background-color:lightgreen;'>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'><img src='public/tutorials/images/green_right_cb.bmp'/></td>
		     <td style='background-color:lightgreen;'>OS X</td>
		     <td>Chrome</td>
		     <td>flash</td>
		     <td style='background-color:lightgreen;'>dsl</td>
		   </tr>
              </tbody>
           </table>
   </div>";
    return $html;
}

function CA4() {
    $html = "<div id='table_tutorial_two' style='width: 100%; margin-left: 20%;'>
       <table id='options' style='width: 140%; font-size: 11pt; border: 2px solid #2293FF;'>
               <tbody>
                   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>IE9</td>
		     <td>flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>Firefox</td>
		     <td>flash</td>
		     <td>dsl</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>Chrome</td>
		     <td>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'><img src='public/tutorials/images/green_right_cb.bmp'/></td>
		     <td>OS X</td>
		     <td style='background-color:orangered;'>IE9</td>
		     <td style='background-color:orangered;'>no flash</td>
		     <td style='background-color:orangered;'>dsl</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>OS X</td>
		     <td>Firefox</td>
		     <td>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>OS X</td>
		     <td>Chrome</td>
		     <td>flash</td>
		     <td>dsl</td>
		   </tr>
              </tbody>
           </table>
   </div>";
    return $html;
}

function CA5() {
    $html = "<div id='table_tutorial_two' style='width: 100%; margin-left: 20%;'>
       <table id='options' style='width: 140%; font-size: 11pt; border: 2px solid #2293FF;'>
               <tbody>
                   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>IE9</td>
		     <td>flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>Firefox</td>
		     <td>flash</td>
		     <td>dsl</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>Win 7</td>
		     <td>Chrome</td>
		     <td>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'><img src='public/tutorials/images/green_right_cb.bmp'/></td>
		     <td style='background-color:lightgreen;'>Win 7</td>
		     <td style='background-color:lightgreen;'>IE9</td>
		     <td style='background-color:lightgreen;'>no flash</td>
		     <td style='background-color:lightgreen;'>dsl</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>OS X</td>
		     <td>Firefox</td>
		     <td>no flash</td>
		     <td>dialup</td>
		   </tr>
		   <tr>
		     <td style='background-color:#E0EEEE; border-top:2px solid #E0EEEE; border-left:2px solid #E0EEEE;
			 border-bottom:2px solid #E0EEEE; border-right:2px solid #2293FF;'></td>
		     <td>OS X</td>
		     <td>Chrome</td>
		     <td>flash</td>
		     <td>dsl</td>
		   </tr>
              </tbody>
           </table>
   </div>";
    return $html;
}
